<!--
 * @Description: description
 * @version: 0.1
 * @Author: youhuimin
 * @Date: 2021-07-14 10:01:59
 * @LastEditors: youhuimin
 * @LastEditTime: 2021-07-14 10:40:00
 * @FilePath: \xdeas-user-web\src\common\echarts.vue
-->
<!--
 * @Description: description
 * @version: 0.1
 * @Author: youhuimin
 * @Date: 2021-07-14 10:01:59
 * @LastEditors: youhuimin
 * @LastEditTime: 2021-07-14 10:12:35
 * @FilePath: \xdeas-user-web\src\common\echart.vue
-->
<template>
  <div :id="id" class="echarts"></div>
</template>
<script>
let myChart
export default {
  name: "echarts",
  // data() {
  //   return {
  //     id: "",
  //     chart: null,
  //   };
  // },
  props: {
    option: {},
    echartsInstance: {},
  },
  mounted() {
    this.$nextTick((_) => {
      this.init();
    });
  },
  created() {
    // 设置随机数id
    let t = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let len = t.length;
    let id = "";
    for (let i = 0; i < 32; i++) {
      id += t.charAt(Math.floor(Math.random() * len));
    }
    this.id = id;
  },
  watch: {
    option: {
      handler: function(val,oldVal) {
        if (this.chart && (oldVal.isUpdate!=val.isUpdate)) {
          // this.chart.setOption(val);
          if(val.isUpdate)this.updateEcharts(val)
        }
      },
    },
  },
  // methods: {
  //   init() {
  //     console.log(this.$echarts, this);
  //     this.chart = this.$echarts.init(document.getElementById(this.id));
  //     // this.chart.setOption(this.option);
  //     this.initEcharts();
  //     let _this = this;
  //     window.addEventListener("resize", function() {
  //       _this.chart.resize();
  //     });
  //   },
  // },
  data() {
    return {
       id: "",
      chart: null,
      themeShine: {
        color: [
          "#f65f54",
          "#e5ae40",
          "#65b168",
          "#4f91ff",
          "#33a9a9",
          "#787885",
          "#ff7011",
          "#5d7deb",
          "#cf5fe8",
        ],

        backgroundColor: "rgba(0, 0, 0, 0)",

        textStyle: {},

        title: {
          textStyle: {
            color: "#27727b",
          },

          subtextStyle: {
            color: "#aaaaaa",
          },
        },

        line: {
          itemStyle: {
            borderWidth: "1",
          },

          lineStyle: {
            width: "3",
          },

          symbolSize: "5",

          symbol: "emptyCircle",

          smooth: false,
        },

        radar: {
          itemStyle: {
            borderWidth: "1",
          },

          lineStyle: {
            width: "3",
          },

          symbolSize: "5",

          symbol: "emptyCircle",

          smooth: false,
        },

        bar: {
          itemStyle: {
            barBorderWidth: 0,

            barBorderColor: "#dbdbdb",
          },
        },

        pie: {
          itemStyle: {
            borderWidth: 0,

            borderColor: "#dbdbdb",
          },
        },

        scatter: {
          itemStyle: {
            borderWidth: 0,

            borderColor: "#dbdbdb",
          },
        },

        boxplot: {
          itemStyle: {
            borderWidth: 0,

            borderColor: "#dbdbdb",
          },
        },

        parallel: {
          itemStyle: {
            borderWidth: 0,

            borderColor: "#dbdbdb",
          },
        },

        sankey: {
          itemStyle: {
            borderWidth: 0,

            borderColor: "#dbdbdb",
          },
        },

        funnel: {
          itemStyle: {
            borderWidth: 0,

            borderColor: "#dbdbdb",
          },
        },

        gauge: {
          itemStyle: {
            borderWidth: 0,

            borderColor: "#dbdbdb",
          },
        },

        candlestick: {
          itemStyle: {
            color: "#c1232b",

            color0: "#b5c334",

            borderColor: "#c1232b",

            borderColor0: "#b5c334",

            borderWidth: 1,
          },
        },

        graph: {
          itemStyle: {
            borderWidth: 0,

            borderColor: "#dbdbdb",
          },

          lineStyle: {
            width: 1,

            color: "#aaa",
          },

          symbolSize: "5",

          symbol: "emptyCircle",

          smooth: false,

          color: [
            "#f65f54",
            "#e5ae40",
            "#65b168",
            "#4f91ff",
            "#33a9a9",
            "#787885",
            "#ff7011",
            "#5d7deb",
            "#cf5fe8",
          ],

          label: {
            color: "#f2f2f2",
          },
        },

        map: {
          itemStyle: {
            normal: {
              areaColor: "#eee",

              borderColor: "#444",

              borderWidth: 0.5,
            },

            emphasis: {
              areaColor: "rgba(255,215,0,0.8)",

              borderColor: "#444",

              borderWidth: 1,
            },
          },

          label: {
            normal: {
              textStyle: {
                color: "#000",
              },
            },

            emphasis: {
              textStyle: {
                color: "rgb(100,0,0)",
              },
            },
          },
        },

        geo: {
          itemStyle: {
            normal: {
              areaColor: "#eee",

              borderColor: "#444",

              borderWidth: 0.5,
            },

            emphasis: {
              areaColor: "rgba(255,215,0,0.8)",

              borderColor: "#444",

              borderWidth: 1,
            },
          },

          label: {
            normal: {
              textStyle: {
                color: "#000",
              },
            },

            emphasis: {
              textStyle: {
                color: "rgb(100,0,0)",
              },
            },
          },
        },

        categoryAxis: {
          axisLine: {
            show: true,

            lineStyle: {
              color: "#e4e7ed",
            },
          },

          axisTick: {
            show: true,

            lineStyle: {
              color: "#cbd0d9",
            },
          },

          axisLabel: {
            show: true,

            textStyle: {
              color: "#303133",
            },
          },

          splitLine: {
            show: false,

            lineStyle: {
              color: ["#cccccc"],
            },
          },

          splitArea: {
            show: false,

            areaStyle: {
              color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"],
            },
          },
        },

        valueAxis: {
          axisLine: {
            show: false,

            lineStyle: {
              color: "#333333",
            },
          },

          axisTick: {
            show: false,

            lineStyle: {
              color: "#333333",
            },
          },

          axisLabel: {
            show: true,

            textStyle: {
              color: "#303133",
            },
          },

          splitLine: {
            show: true,

            lineStyle: {
              color: ["#e4e7ed"],
            },
          },

          splitArea: {
            show: false,

            areaStyle: {
              color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"],
            },
          },
        },

        logAxis: {
          axisLine: {
            show: false,

            lineStyle: {
              color: "#27727b",
            },
          },

          axisTick: {
            show: false,

            lineStyle: {
              color: "#333333",
            },
          },

          axisLabel: {
            show: true,

            textStyle: {
              color: "#303133",
            },
          },

          splitLine: {
            show: true,

            lineStyle: {
              color: ["#e4e7ed"],
            },
          },

          splitArea: {
            show: false,

            areaStyle: {
              color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"],
            },
          },
        },

        timeAxis: {
          axisLine: {
            show: true,

            lineStyle: {
              color: "#e4e7ed",
            },
          },

          axisTick: {
            show: true,

            lineStyle: {
              color: "#303133",
            },
          },

          axisLabel: {
            show: true,

            textStyle: {
              color: "#303133",
            },
          },

          splitLine: {
            show: false,

            lineStyle: {
              color: ["#cccccc"],
            },
          },

          splitArea: {
            show: false,

            areaStyle: {
              color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"],
            },
          },
        },

        toolbox: {
          iconStyle: {
            normal: {
              borderColor: "#c1232b",
            },

            emphasis: {
              borderColor: "#e87c25",
            },
          },
        },

        legend: {
          textStyle: {
            color: "#303133",
          },
        },

        tooltip: {
          axisPointer: {
            lineStyle: {
              color: "#27727b",

              width: 1,
            },

            crossStyle: {
              color: "#27727b",

              width: 1,
            },
          },
        },

        timeline: {
          lineStyle: {
            color: "#293c55",

            width: "1",
          },

          itemStyle: {
            normal: {
              color: "#27727b",

              borderWidth: 1,
            },

            emphasis: {
              color: "#72d4e0",
            },
          },

          controlStyle: {
            normal: {
              color: "#27727b",

              borderColor: "#27727b",

              borderWidth: "0.5",
            },

            emphasis: {
              color: "#27727b",

              borderColor: "#27727b",

              borderWidth: "0.5",
            },
          },

          checkpointStyle: {
            color: "#c1232b",

            borderColor: "#c23531",
          },

          label: {
            normal: {
              textStyle: {
                color: "#293c55",
              },
            },

            emphasis: {
              textStyle: {
                color: "#293c55",
              },
            },
          },
        },

        visualMap: {
          color: ["#c1232b", "#fcce10", "#f6efa6"],
        },

        dataZoom: {
          handleSize: "undefined%",

          textStyle: {},
        },

        markPoint: {
          label: {
            color: "#f2f2f2",
          },

          emphasis: {
            label: {
              color: "#f2f2f2",
            },
          },
        },
      },
      chart: null,
      optionId: null,
      colorList: [
        "#F65F54",
        "#E5AE40",
        "#65B168",
        "#4F91FF",
        "#33A9A9",
        "#787885",
        "#FF7011",
      ],
      chartGridTop: 110,
      chartGridHeight: 150,
      xAxisData: [],
      thatData: null,
    };
  },
  // mounted() {
  //   if (typeof window.echarts === "function") {
  //     this.initEcharts();
  //   } else {
  //     // 动态引入较大类库避免影响页面展示
  //     const script = document.createElement("script");
  //     // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
  //     script.src = "./static/echarts.min.js";
  //     script.onload = this.initEcharts;
  //     document.head.appendChild(script);
  //   }
  // },

    destroyed() {
      this.$bus.$off('resize')
    },
    methods: {
    init() {
      console.log('this.$echarts, this');
      console.log(this.$echarts, this);
      this.chart = this.$echarts.init(document.getElementById(this.id));
      // this.chart.setOption(this.option);
      this.initEcharts();
      let _this = this;

      this.$bus.$on('resize',function(){

        // 监听路由侧边栏收缩时导致的显示问题
        _this.chart.resize()
      })
      window.addEventListener("resize", function() {
        _this.chart.resize();
      });
    },
    // 利用接口返回的配置信息 渲染echars
    initEByApi(option) {
      let that = this;
      var start = option.charsInfo.xAxis.length - 10;
      var end = option.charsInfo.xAxis.length - 1;
      var optionByApi = {
        title: option.charsInfo.title ? option.charsInfo.title : {},
        animation: false,
        backgroundColor: "#fff",
        legend: option.charsInfo.legend,
        //  || ['炉水温度', '出水温度', '回水温度', '烟道温度', '节能器烟温', '冷凝出口烟温', '冷凝出水烟温']
        tooltip: {
          //移动端展示方式
          ...option.charsInfo.tooltip,
          // #ifdef H5
          formatter: "{b0}: {c0}",
          // #endif
          // #ifdef APP-PLUS
          formatter: eval(option.charsInfo.tooltip.formatter),
          // #endif
        },
        //坐标轴指示器（axisPointer）的全局公用设置
        axisPointer: {
          type: "shadow",
          link: {
            xAxisIndex: "all",
          },
        },
        //直角坐标系内绘图网格
        grid: option.charsInfo.grid,
        xAxis: option.charsInfo.xAxis.map((v, i) => {
          v.gridIndex = that.callbackIndex(option.charsInfo.grid, v.grid, "id");
          return v;
        }),
        yAxis: option.charsInfo.yAxis.map((v, i) => {
          v.gridIndex = that.callbackIndex(option.charsInfo.grid, v.grid, "id");
          // v.max = 10000
          v.max = eval(v.max);
          v.min = eval(v.min);
          if (v.axisLabel && v.axisLabel.formatter)
            v.axisLabel.formatter = eval(v.axisLabel.formatter);
          if (v.nameTextStyle && v.nameTextStyle.padding) {
            v.nameTextStyle.padding = eval(v.nameTextStyle.padding);
          }
          return v;
        }),
        //dataZoom 组件 用于区域缩放
        // dataZoom: [
        //   {
        //     type: "inside",
        //     realtime: true,
        //     xAxisIndex: that.option.charsInfo.xAxis.map((v, i) => {
        //       return i;
        //     }),
        //     fillerColor: "rgba(203, 229, 204, 1)",
        //     backgroundColor: "#ffffff",
        //     handleSize: "140%",
        //     start: 0,
        //     end: 100,
        //     zoomOnMouseWheel: false,
        //     preventDefaultMouseMove: false,
        //   },
        //   {
        //     show: true,
        //     xAxisIndex: that.option.charsInfo.xAxis.map((v, i) => {
        //       return i;
        //     }),
        //     type: "slider",
        //     bottom: 10,
        //     height: 16,
        //     start: 0,
        //     end: 100,
        //     handleIcon:
        //       "M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
        //     handleSize: "105%",
        //   },
        // ],
        //每个系列通过 type 决定自己的图表类型
        series: option.charsInfo.series.map((v, i) => {
          v.xAxisIndex = that.callbackIndex(
            option.charsInfo.xAxis,
            v.xAxis,
            "id"
          );
          v.yAxisIndex = that.callbackIndex(
            option.charsInfo.yAxis,
            v.yAxis,
            "id"
          );
          v.max = eval(v.max);
          return v;
        }),
      };
      if (option.charsInfo.title) optionByApi.title = option.charsInfo.title;
      if (option.charsInfo.color) optionByApi.color = option.charsInfo.color;
      return optionByApi;
    },
    initEcharts() {
      this.optionId = this.option.id;
      let echarts =  this.$echarts
      // 设置主题
      echarts.registerTheme("shine", this.themeShine);
      myChart = echarts.init(this.$el, "shine");
      this.chart = myChart;
      // 观测更新的数据在 view 层可以直接访问到
      this.thatData = this;
      // console.log(this.chartGridHeight, 'this.chartGridHeight,');
      myChart.setOption(this.initEByApi(this.option));
      // this.updateEcharts(this.option)
    },
    updateEcharts(option) {
      console.log(option,'监听 service 层数据变更',this.option,this.chart);
      if (this.chart) {
        // 设置新的option
        let opt = this.initEByApi(option||this.option)
        setTimeout(() => {
          this.$nextTick(()=>{
            this.chart.setOption(opt, true);
            this.$forceUpdate()
          })
        }, 1000);
      }
    },
    // 返回一个数在一个数组里面的下标
    callbackIndex(arr, item, idName) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i][idName] === item) {
          // return arr[i].gridIndex; //不支持则进入循环,判断为真后输入 
          return i; //不支持则进入循环,判断为真后输入
        }
      }
    },
  },

  beforeDestroy() {
    if (this.chart) {
      this.chart.clear();
    }
  },
};
</script>
<style lang="less" scoped>
.echart {
  width: 100%;
  height: 100%;
}
</style>
